<template>
  <view class="content">
    <!-- 顶部滑块区域 -->
    <view class="swiper">
      <swiper
        class="swiper"
        :autoplay="true"
        :interval="3000"
        :duration="500"
        @change="changeSwiper"
      >
        <swiper-item v-for="item in banner" :key="item.cover_display" @click="jumpDetails(item)">
          <view class="swiper-image">
            <image :src="item.cover_display" />
          </view>
        </swiper-item>
      </swiper>
      <!-- 轮播指示点样式修改 -->
      <view class="dots">
        <view v-for="(item, index) in banner.length" :key="index">
          <view class="dot" :class="index === swiperCurrent ? ' active' : ''" />
        </view>
      </view>
    </view>
    <!-- 菜单区域 -->
    <view class="menu">
      <view v-for="item in menu" :key="item.uid" class="menu-image">
        <image :src="item.image_display" />
        <view>{{ item.name }}</view>
      </view>
    </view>
    <!-- 三个查看更多 -->
    <view class="layout">
      <view v-for="item in layout" :key="item.uid">
        <view v-if="item.layout_display !== 'BANNER'">
          <!-- 热门套票 -->
          <view v-if="item.layout_display === 'FLOW_CARD'" class="hot spacing">
            <view class="hot-top top-flex">
              <view>
                <image class="icon-image" src="@/static/image/home/hot.png" />
                <text class="bold">{{ item.name }}</text>
              </view>
              <view v-if="item.more_type_display !== 'NONE'" @click="check(item)">
                <text class="routine">查看更多</text>
                <image class="arrow-image" src="@/static/image/home/arrow.png" />
              </view>
            </view>
            <!-- 循环图片 -->
            <view
              v-for="item_FLOW_CARD in item.get_layout_item"
              :key="item_FLOW_CARD.cover_display"
              class="hot-image"
              @click="jumpDetails(item_FLOW_CARD)"
            >
              <text class="hot-rectangle">￥{{ item_FLOW_CARD.price }}</text>
              <image :src="item_FLOW_CARD.cover_display" />
            </view>
          </view>
          <!-- 资深爱好者 -->
          <view v-if="item.layout_display === 'HORIZONTAL_SCROLL'" class="amateur spacing">
            <view class="amateur-top top-flex">
              <view>
                <image class="icon-image" src="@/static/image/home/amateur.png" />
                <text class="bold">{{ item.name }}</text>
              </view>
              <view v-if="item.more_type_display !== 'NONE'" @click="check(item)">
                <text class="routine">查看更多</text>
                <image class="arrow-image" src="@/static/image/home/arrow.png" />
              </view>
            </view>
            <!-- 横向滚动区域 -->
            <scroll-view scroll-x="true" class="scroll">
              <view
                v-for="item_HORIZONTAL_SCROLL in item.get_layout_item"
                :key="item_HORIZONTAL_SCROLL.cover_display"
                class="box"
                @click="jumpDetails(item_HORIZONTAL_SCROLL)"
              >
                <view>
                  <text>{{ item_HORIZONTAL_SCROLL.name }}</text>
                  <text>￥{{ item_HORIZONTAL_SCROLL.price }}</text>
                </view>
                <image :src="item_HORIZONTAL_SCROLL.cover_display" class="box-images" />
              </view>
            </scroll-view>
          </view>
          <!-- 热门票种 -->
          <view v-if="item.layout_display === 'SINGLE_PRODUCT'" class="ticketType spacing">
            <view class="ticketType-top top-flex">
              <view>
                <image class="icon-image" src="@/static/image/home/ticketType.png" />
                <text class="bold">{{ item.name }}</text>
              </view>
              <view v-if="item.more_type_display !== 'NONE'" @click="check(item)">
                <text class="routine">查看更多</text>
                <image class="arrow-image" src="@/static/image/home/arrow.png" />
              </view>
            </view>
            <!-- 购票列表 -->
            <view class="buyList">
              <view
                v-for="item_SINGLE_PRODUCT in item.get_layout_item"
                :key="item_SINGLE_PRODUCT.cover_display"
                class="buyList-item"
              >
                <image :src="item_SINGLE_PRODUCT.cover_display" @click="jumpDetails(item_SINGLE_PRODUCT)" />
                <view>
                  <view class="buyList-item-left">
                    <view>{{ item_SINGLE_PRODUCT.name }}</view>
                    <view>￥{{ item_SINGLE_PRODUCT.price }}</view>
                  </view>
                  <view class="buyList-item-right">
                    <button size="mini" type="default" @click="jumpToOrder(item_SINGLE_PRODUCT)">购票</button>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getInit, getSalesperson } from '@api/user'
import { set, get } from '@utils/storage'
export default {
  data() {
    return {
      swiperCurrent: 0,
      menu: null,
      layout: null,
      banner: null
    }
  },
  created() {
    getSalesperson().then(res => {
      set('sale', res.data.data)
    })
    if (get('init').index === 0) {
      const query = get('init').query
      this.menu = query.menu
      this.layout = query.layout
      this.banner = this.getQuery(
        'BANNER',
        get('init').query.layout
      ).get_layout_item
      set('init', { query: get('init').query, index: 1 })
    } else {
      this.getinit()
    }

    const agent = get('agent')
    uni.showToast({
      title: agent,
      icon: 'none',
      duration: 1000
    })
  },
  methods: {
    getinit() {
      // 获得首页数据
      getInit().then((res) => {
        this.menu = res.data.data.menu
        this.layout = res.data.data.layout
        this.banner = this.getQuery(
          'BANNER',
          res.data.data.layout
        ).get_layout_item
        this.stopPullDownRefresh()
      })
    },
    // 刷新
    onPullDownRefresh() {
      this.getinit()
      // this.swiperCurrent = 0;
    },
    stopPullDownRefresh() {
      uni.stopPullDownRefresh()
    },
    // 获得特定数据
    getQuery(type, layout) {
      const index = layout.findIndex((item) => {
        return item.layout_display === type
      })
      return layout[index]
    },
    // 监听滑块索引的改变
    changeSwiper(e) {
      this.swiperCurrent = e.detail.current
    },
    // 查看更多跳转
    check(data) {
      switch (data.more_type_display) {
        case 'URL':
          uni.navigateTo({
            url: `/pages/webView/index?url=${data.more_path}`
          })
          break
        case 'PAGE':
          uni.navigateTo({
            url: data.more_path
          })
          break
      }
    },
    // 跳转详情
    jumpDetails(data) {
      if (data.target_type_display === 'URL') {
        uni.navigateTo({
          url: `/pages/webView/index?url=${data.more_path}`
        })
      } else {
        switch (data.target_model_display) {
          case 'TICKET':
          // 跳转商品详情
            uni.navigateTo({
              url: `/pages/home/details/ticket?uid=${data.target_path_display}&type=TICKET`
            })
            break
          case 'SELF':
          // 跳转自营商品详情
            uni.navigateTo({
              url: `/pages/home/details/ticket?uid=${data.target_path_display}&type=SELF&display=flase`
            })
            break
        }
      }
    },
    // 跳转出行资料
    jumpToOrder(data) {
      switch (data.target_model_display) {
        case 'TICKET' :
          uni.navigateTo({
            url: `/pages/order/single?uid=${data.target_path_display}`
          })
          break
        case 'SELF':
          uni.navigateTo({
            url: `/pages/home/details/ticket?uid=${data.target_path_display}&type=SELF&display=true`
          })
          break
      }
    }
  }
}
</script>

<style>
.content {
  padding: 30rpx;
  border:2rpx solid  #F1F1F1;
}
/* 顶部滑块区域 */
.swiper {
  position: relative;
  height: 400rpx;
}
.swiper-image {
  width: 100%;
  height: 400rpx;
}
.swiper-image > image {
  border-radius: 15rpx;
  width: 100%;
  height: 100%;
}
/* 指示点样式修改 */
.dots {
  position: absolute;
  width: 100%;
  height: 8rpx;
  bottom: 36rpx;
  z-index: 199;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.dot {
  width: 20rpx;
  height: 8rpx;
  transition: all 0.5s;
  background-color: #ffffff;
  margin-right: 10rpx;
}
.active {
  width: 40rpx;
  height: 8rpx;
  background-color: #306de9;
}
/* 菜单区域 */
.menu {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.menu-image {
  font-size: 32rpx;
  margin-left: 76rpx;
  margin-top: 40rpx;
  text-align: center;
}
.menu-image > image {
  width: 80rpx;
  height: 80rpx;
}
.menu-image:nth-child(1) {
  margin-left: 70rpx;
}
.menu-image:nth-child(5) {
  margin-left: 70rpx;
}
/* 三个查看更多 */
/* 公共区域 */
.icon-image {
  width: 50rpx;
  height: 50rpx;
}
.arrow-image {
  margin-top: 9rpx;
  width: 32rpx;
  height: 32rpx;
}
.spacing {
  margin-top: 40rpx;
}
.top-flex {
  display: flex;
  justify-content: space-between;
  height: 50rpx;
}
.top-flex > view {
  display: flex;
  justify-content: start;
}
.bold {
  font-size: 34rpx;
  font-weight: bold;
  margin-left: 10rpx;
  line-height: 50rpx;
}
.routine {
  font-size: 28rpx;
  line-height: 50rpx;
  color: #9b9b9b;
  margin-right: 14rpx;
}
/* 热门套票私有 */
.hot-image {
  position: relative;
  margin-top: 30rpx;
  border-radius: 15rpx;
  overflow: hidden;
}
.hot-image > image {
  width: 100%;
  height: 392rpx;
  border-radius: 15rpx;
}
.hot-rectangle {
  position: absolute;
  min-width: 136rpx;
  height: 50rpx;
  background: #306de9;
  border-radius: 26rpx 16rpx 0rpx 26rpx;
  right: 0;
  color: #ffffff;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 50rpx;
  text-align: center;
}
/* 资深爱好者私有 */
.scroll {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 30rpx;
}
.box {
  display: inline-block;
  width: 550rpx;
  height: 392rpx;
  margin-right: 30rpx;
}
.box > view {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;
}
.box > view > text:nth-child(1) {
  font-size: 32rpx;
}
.box > view > text:nth-child(2) {
  font-size: 32rpx;
  color: #dd3939;
}
.box:last-child {
  margin-right: 0;
}
.box-images {
  width: 100%;
  height: 324rpx;
  border-radius: 15rpx;
}
/* 热门票种私有 */
.buyList {
  margin-top: 30rpx;
}
.buyList-item {
  display: flex;
  margin-top: 40rpx;
  height: 168rpx;
}
.buyList-item:nth-child(1) {
  margin-top: 0rpx;
}
.buyList-item > image {
  width: 200rpx;
  height: 168rpx;
}
.buyList-item > view {
  width: 520rpx;
  display: flex;
  justify-content: space-between;
}
.buyList-item-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 28rpx;
  margin-left: 20rpx;
}
.buyList-item-left > view:nth-child(2) {
  font-size: 32rpx;
  color: #dd3939;
  font-weight: bold;
}
.buyList-item-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.buyList-item-right > button {
  color: #ffffff;
  background-color: #306de9;
}
</style>
